<!--
 * @Author: tangcj 572036028@qq.com
 * @Date: 2024-01-25 10:45:48
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2024-01-30 14:50:42
 * @FilePath: /health-gpt-website/src/views/Home/components/Page4.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="page4">
    <div class="mainBox">
      <div class="contentBox" id="contentBoxPage4">
        <div class="title">E-BOT</div>
        <div class="line"></div>
        <div class="content">
          <div class="textBox1">
            <span class="boldText">机器人医生检测仪</span>
            <span
              >是一款功能全面、技术先进的医疗设备。机器人医生检测仪的功能包括全身器官评估、营养及身体健康评估、骨与关节健康评估、特殊健康评估等功能。它通过先进的人工智能算法技术，机器人医生能够准确评估器官目前的功能状况，从而发现潜在的疾病或病变。不仅提高了疾病诊断的效率和准确性，同时也为个体的健康管理和预防保健提供了有力支持。</span
            >
          </div>
          <div class="textBox2">
            例如营养及身体健康评估功能。它能够对人体的维生素、微量元素、蛋白质、脂肪、碳水化合物等营养成分进行检测和分析，从而评估个体的营养状况和身体健康水平。这一功能对于预防营养不良、肥胖、糖尿病等慢性疾病具有重要意义。在骨与关节健康评估方面，机器人医生采用了先进的骨密度检测技术和关节活动度测量技术，能够准确评估个体的骨骼质量和关节功能状况。这对于预防骨质疏松、关节炎等疾病，以及评估骨折康复和关节手术后恢复情况具有重要作用。
          </div>
        </div>
      </div>
    </div>
    <div class="floaTopImg" id="floaTopImg">
      <img src="../../../assets/bgImg/page4TopIcon.png" alt="" />
    </div>
    <div class="floatLeftImg" id="floatLeftImg">
      <img src="../../../assets/bgImg/Page4LeftIcon.png" alt="" />
    </div>
    <div class="floatRightImg" id="floatRightImg">
      <img src="../../../assets/bgImg/page4RightIcon.png" alt="" />
    </div>
    <div class="clickBox" @click="nextPage">
      <div class="arrowDown">
        <img src="../../../assets/icon/arrow-down.png" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showAnimation: false,
    }
  },
  mounted () {
    // 监听鼠标指针位置 根据位置值调整图片位置
    // document.onmousemove = function () {
    //   let floaTopImg = document.getElementById('floaTopImg')
    //   var event = event || window.event
    //   var x = event.clientX //鼠标x坐标
    //   var y = event.clientY //鼠标y坐标
    //   var scrollWidth = document.body.scrollWidth //屏幕宽度
    //   var scrollHeight = document.body.scrollHeight //屏幕宽度
    //   var xPos = (scrollWidth - 200)
    //   var yPos = y
    //   console.log(document.body.scrollWidth)
    //   console.log(xPos, floaTopImg.scrollWidth)
    //   floaTopImg.style.left = x+'px'
    //   floaTopImg.style.top = y+'px'
    // }
  },
  methods: {
    nextPage () {
      this.$emit('next')
    },
    // 当第一次切换到该页，启用动画
    initAnimation () {
      if (this.showAnimation) { //动画只执行一次
        return false
      }
      // 启用整体文字渲染动画
      let element = document.getElementById("contentBoxPage4")
      element.classList.add("contentBoxAnimation")
      // 下次进入该函数不再执行
      this.showAnimation = true
    },
  },
}
</script>
<style scoped lang="less">
.page4 {
  height: 100%;
  width: 100%;
  background: rgb(109, 100, 100);
  display: flex;
  justify-content: center;
  background-image: url(../../../assets/bgImg/bg4.png);
  background-size: 100% 100%;
  background-attachment: fixed;
  position: relative;
  .mainBox {
    width: 1200px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .contentBoxAnimation {
      position: absolute;
      animation: popup 1.5s ease-in-out;
      animation-fill-mode: forwards;
      // animation-delay: 1s; /* 设置动画延迟执行时间 */

      @keyframes popup {
        0% {
          top: 50%;
          opacity: 0;
        }
        100% {
          top: 0;
          opacity: 1;
        }
      }
    }
    .contentBox {
      width: 918px;
      height: 522px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      opacity: 0;
      .title {
        font-size: 40px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 60px;
      }
      .line {
        width: 329px;
        height: 4px;
        background: #123be7;
        border-radius: 50px 50px 50px 50px;
      }
      .content {
        position: absolute;
        bottom: 0;
        width: 918px;
        height: 374px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 30px 30px 30px 30px;
        .textBox1 {
          margin: 56px 48px;
          .boldText {
            font-weight: 600;
          }
        }
        .textBox2 {
          margin: 0 48px;
        }
      }
    }
  }
  .floaTopImg {
    position: absolute;
    right: 100px;
    transition: transform 7s ease;
    img {
      width: 200px;
      height: 200px;
    }
  }
  .floatLeftImg {
    position: absolute;
    left: 100px;
    bottom: 100px;
    img {
      width: 200px;
      height: 200px;
    }
  }
  .floatRightImg {
    position: absolute;
    right: 100px;
    bottom: 150px;
    img {
      width: 200px;
      height: 200px;
    }
  }
}
</style>